<template>
  <body class="body-container">
    <div class="search-box">
      <el-button class="search-box_btn" type="primary" @click="search">查询</el-button>
      <el-input class="search-box_input" v-model="flightNo" placeholder="请输入航班号" clearable />
      <el-date-picker
        v-model="execDate"
        type="date"
        placeholder="选择日期"
      />
    </div>
    <div class="search-list">
      <el-table 
      class="search-data-table"
      :data="tableData" 
      v-loading="isLoading" 
      style="width: 100%">
        <el-table-column prop="device_id" label="机载感知终端设备唯一标识" width="200" fixed/>
        <el-table-column prop="dynamic_flight_id" label="动态航班ID" width="100" />
        <el-table-column prop="dynamic_aircraft_id" label="动态航空器ID" width="110" />
        <el-table-column prop="exec_date" label="执行日期" />
        <el-table-column prop="in_out_flag" label="进出港标识(A-进港，D-出港)" width="230"/>
        <el-table-column prop="airline" label="航空公司IATA代码"  width="150" />

        <el-table-column prop="flight_no" label="航班号"/>
        <el-table-column prop="vip_flag" label="VIP标识"/>
        <el-table-column prop="aircraft_no" label="机号" />
        <el-table-column prop="aircraft_type" label="机型" />
        <el-table-column prop="route" label="航线" />
        <el-table-column prop="dep_station" label="始发站" />

        <el-table-column prop="des_station" label="终点站"/>
        <el-table-column prop="progress_status" label="进展状态"/>
        <el-table-column prop="abnormal_status" label="异常状态" />
        <el-table-column prop="gate" label="登机口" />
        <el-table-column prop="stand" label="机位" />
        <el-table-column prop="runway" label="跑道" />

        <el-table-column prop="pstd" label="前站计划起飞时间" width="170"/>
        <el-table-column prop="petd" label="前站预计起飞时间" width="170"/>
        <el-table-column prop="patd" label="前站实际起飞时间" width="170"/>
        <el-table-column prop="sta" label="计划降落时间" width="170"/>
        <el-table-column prop="eta" label="预计降落时间" width="170"/>
        <el-table-column prop="ata" label="实际降落时间" width="170"/>

        <el-table-column prop="std" label="计划起飞时间"  width="170"/>
        <el-table-column prop="etd" label="预计起飞时间"  width="170"/>
        <el-table-column prop="atd" label="实际起飞时间"  width="170"/>
        <el-table-column prop="create_time" label="数据入库时间" width="170"/>
        <el-table-column prop="update_time" label="数据更新时间" width="170"/>
        <el-table-column prop="system_time" label="系统时间" width="170"/>
        <el-table-column prop="eta_time" label="飞机预达时间" width="170"/>
        <el-table-column prop="taxiin_time" label="滑入时间"/>
        <el-table-column prop="taxiout_time" label="滑出时间"/>

        <el-table-column prop="taxtime0" label="半小时内滑出时间"/>
        <el-table-column prop="taxtime1" label="1小时内滑出时间"/>
        <el-table-column prop="taxtime2" label="2小时内滑出时间"/>
      </el-table>
    </div>
    
  </body>
</template>

<script>
import moment from 'moment'
import { getFlighData } from "@/api/flight"
import { reactive, onMounted, toRefs } from 'vue'
export default {
  name: 'Demo',
  setup() {
    const data = reactive({
      isLoading: false,
      flightNo: null,
      execDate: null,
      tableData: [] // {sta: "2023-10-11 12:00:00"}
    })
    onMounted(() => {
    })
    const search = () => {
      let param = {
        exec_date: data.execDate ? moment(data.execDate).format('YYYY-MM-DD') : null,
        flightno: data.flightNo ? data.flightNo : null
      }
      getData(param)
    }
    const getData = (param) => {
      data.isLoading = true
      getFlighData(param).then(res => {
        data.isLoading = false
        data.tableData = [...JSON.parse(JSON.stringify(res.data))] //res.data
        console.log('tabledata', data.tableData)
      }).catch(() => {
        data.isLoading = false
        ElMessage({ message: '请求失败！',type: 'warning' })
      })
    }
    return {
      ...toRefs(data),
      getData,
      search
    }
  }
}
</script>
<style lang="less" scoped>
.body-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fefefe;
  .search-box {
    display: flex;
    margin: 20px;
    display: flex;
    flex-direction: row-reverse;
    &_input{
      width: 300px;
      margin: 0 0 0 10px;
    }
    &_btn{
      margin: 0 0 0 10px;
    }
  }
  .search-list{
    flex: 1;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 20px;
    padding-bottom: 20px;
    .search-data-table{
      height: 800px;
      border-bottom: 1px solid #d4d7de;
      // border-top: 1px solid #d4d7de;
      
    }
  }
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #c1bfbf;
}
::-webkit-scrollbar-track {
    // border-radius: 8px;
    // background-color: #e7e7e7;
    // border: 1px solid #cacaca;
}
/deep/.el-loading-spinner{
  top:100px
}
/deep/.el-table th.el-table__cell.is-leaf {
  background: #e7e7e7
}
/deep/.el-table .cell{
  color: #333;
}
</style>